// AtModule.js
import Quill from 'quill'
export default function AtModule(quill) {
  // 创建提示框元素
  const atContainer = document.createElement('div')
  atContainer.className = 'at-container'
  atContainer.style.position = 'absolute'
  atContainer.style.display = 'none'
  atContainer.style.border = '1px solid #ccc'
  atContainer.style.background = '#fff'
  atContainer.style.zIndex = '1000'
  document.body.appendChild(atContainer)

  // 假设这是用户列表
  const users = ['Alice', 'Bob', 'Charlie', 'David', '张三', '李四', '王五']

  quill.root.addEventListener('keydown', (evt) => {
    if (evt.key === '@') {
      // 显示提示框并填充用户列表
      atContainer.innerHTML = users.map((user) => `<div>${user}</div>`).join('')
      atContainer.style.display = 'block'
      atContainer.style.left = `${evt.target.getBoundingClientRect().left}px`
      atContainer.style.top = `${evt.target.getBoundingClientRect().top + evt.target.offsetHeight}px`
    }
  })

  // 点击提示框中的用户名时，插入到编辑器中
  atContainer.addEventListener('click', (evt) => {
    if (evt.target.tagName === 'DIV') {
      const username = evt.target.textContent
      // 获取光标位置前确保编辑器有焦点
      quill.focus()

      // 获取当前光标位置
      let cursorPosition = quill.getSelection(true).index

      // 检查光标前一个字符是否是 '@' 符号
      if (quill.getText(cursorPosition - 1, 1) === '@') {
        // 删除 '@' 符号
        quill.deleteText(cursorPosition - 1, 1)
        // 更新光标位置
        cursorPosition -= 1
      }

      // 插入用户名并设置新的光标位置
      quill.insertText(cursorPosition, `@${username} `, Quill.sources.USER)
      quill.setSelection(cursorPosition + username.length + 2, Quill.sources.SILENT)

      // 隐藏提示框
      atContainer.style.display = 'none'
    }
  })

  // 监听文本变化，当输入非'@'时隐藏提示框
  quill.on('text-change', () => {
    const range = quill.getSelection()
    if (range && quill.getText(range.index - 1, 1) !== '@') {
      atContainer.style.display = 'none'
    }
  })
  // // 监听键盘事件，特别是删除键
  quill.root.addEventListener('keydown', (evt) => {
    if (evt.key === 'Backspace') {
      // 获取当前光标位置
      const range = quill.getSelection(true)
      if (range) {
        const cursorIndex = range.index
        const allText = quill.getText()
        // 检查光标前是否有 '@' 符号
        if (cursorIndex > 0 && quill.getText(cursorIndex - 1, 1) === ' ') {
          // 找到 '@' 符号和用户名的结束位置
          let endIndex = cursorIndex - 1
          while (endIndex > 0 && quill.getText(endIndex - 1, 1) !== '@') {
            endIndex--
          }
          // 删除 '@' 符号和用户名
          quill.deleteText(endIndex, cursorIndex - endIndex)
          // 阻止默认行为，避免删除两次
          evt.preventDefault()
        }
      }
    }
  })
  // 监听键盘事件，特别是删除键
  // quill.root.addEventListener('keydown', (evt) => {
  //   if (evt.key === 'Backspace') {
  //     // 获取当前光标位置
  //     const range = quill.getSelection(true);
  //     if (range) {
  //       const cursorIndex = range.index;
  //       const allText = quill.getText();
  //       // 检查光标前是否有空格
  //       if (cursorIndex > 0 && allText[cursorIndex - 1] === ' ') {
  //         // 找到 '@' 符号和用户名的结束位置
  //         let endIndex = cursorIndex - 1;
  //         while (endIndex > 0 && allText[endIndex - 1] !== '@') {
  //           endIndex--;
  //         }
  //         // 检查 '@' 符号后面的文本是否符合用户名的格式
  //         if (endIndex > 0 && allText[endIndex - 1] === '@') {
  //           const usernamePattern = /@[a-zA-Z]+(?=\s)/;
  //           const match = usernamePattern.exec(allText.substr(0, endIndex));
  //           if (match) {
  //             // 删除 '@' 符号和用户名
  //             quill.deleteText(endIndex - match[0].length, match[0].length);
  //             // 阻止默认行为，避免删除两次
  //             evt.preventDefault();
  //           }
  //         }
  //       }
  //     }
  //   }
  // });
}
